<template>
	<uni-search-bar @confirm="search" @input="search" v-model="searchValue">
	</uni-search-bar>
	<ul>
		<li :class="item.id == headerid?'boxborder':''" v-for="(item,index) in header" @click="changeheaderid(item.id)">
			<view>{{item.title}}</view>
		</li>
	</ul>
	<!-- 内容 -->
	<view class="content">
		<view class="content_box"></view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	const app = getApp();
	var page = 1;
	var limit = 15;
	// 处理筛选
	const header = [{
		id: 1,
		title: "全部",
	}, {
		id: 2,
		title: "未到期",
	}, {
		id: 3,
		title: "已到期",
	}];
	const headerid = ref(1);
	const changeheaderid = (e) => {
		headerid.value = e
		getgoodslist()
	};
	// 获取商品列表
	var goodslist = reactive([])
	var searchValue = ref("")
	const getgoodslist = () => {
		uni.showLoading({
			title:"正在加载中"
		})
		var val = {
			type: headerid.value,
			goods_name:searchValue.value,
			page:page,
			limit:limit
		}
		app.apiPost(app.globalData.apiList.goodslist, val, (res) => {
			uni.hideLoading()
			
		})
	};
	// 搜索
	const search = () => {
		let time = 1
		if (time == 1) {
			getgoodslist()
			time++
		}
		setTimeout(() => {
			time = 1
		}, 500)
	}
	onMounted(() => {
		getgoodslist()
	})
</script>

<style scoped lang="scss">
	page {
		background-color: #f8f8f8;
	}

	ul {
		list-style-type: none;
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		justify-content: space-between;
		font-size: 30rpx;
		position: sticky;

		li {
			flex: 1;
			padding: 20rpx;
			text-align: center;
		}
	}

	.boxborder {
		border-bottom: 2rpx solid #f60;
		font-weight: bold;
		color: #f60;
	}

	.content {
		margin: 30rpx;

		.content_box {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
		}
	}
</style>